<template>
  <div class="home-con">
    <!-- 今日订单总数 -->
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="dd_item">
          <div><img src="item.img" /></div>
          <div class="dd_text">
            <div>{{ item.name }}</div>
            <div>{{ item.price }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 待处理事务 -->
    <el-row>
      <div class="home-con2">待处理事务</div>
      <div class="con2box">
        <el-col :span="8" v-for="(item, index) in daichuliArr" :key="index">
          <div class="daichuli_item">
            <div>{{ item.name }}</div>
            <div class="daizi">({{ item.num }})</div>
          </div>
        </el-col>
      </div>
    </el-row>

    <!-- 商品总览 -->
    <div class="box">
      <div class="con3">
        <el-row>
          <div class="home-con3">商品总览</div>
          <el-col :span="6" v-for="(item, index) in shangpingArr" :key="index">
            <div class="shangping_item">
              <div>{{ item.num }}</div>
              <div>{{ item.state }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--用户总览  -->
      <div class="con4">
        <el-row>
          <div class="home-con4">用户总览</div>
          <el-col :span="6" v-for="(item, index) in yonghuArr" :key="index">
            <div class="yonghu_item">
              <div>{{ item.num }}</div>
              <div>{{ item.state }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 订单统计 -->
    <div class="box2">
      <div class="dingdan-con">订单统计</div>
      <div class="box5">
        <div class="box3">
          <el-row>
            <el-col
              :span="24"
              v-for="(item, index) in dingdanArr2"
              :key="index"
            >
              <div class="dingdan_item">
                <div>{{ item.name }}</div>
                <div>{{ item.num }}</div>
                <div>{{ item.state }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div id="mychart" class="mychart">我是图片</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data: function () {
    return {
      //<!-- 今日订单总数 -->
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销售总额",
          price: "3000",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "昨日销售总额",
          price: "4000",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],

      //待处理事务
      daichuliArr: [
        { id: 1, name: "待付款订单", num: 10 },
        { id: 2, name: "已完成订单", num: 5 },
        { id: 3, name: "待确认订单", num: 20 },
        { id: 3, name: "待发货订单", num: 30 },
        { id: 3, name: "新缺货登记", num: 6 },
        { id: 3, name: "待处理退款申请", num: 8 },
        { id: 3, name: "已发货订单", num: 12 },
        { id: 3, name: "待处理退货订单", num: 9 },
        { id: 3, name: "广告位即将到期", num: 10 },
      ],

      //商品总览
      shangpingArr: [
        { id: 1, num: "100", state: "已下架" },
        { id: 1, num: "400", state: "已上架" },
        { id: 1, num: "50", state: "库存紧张" },
        { id: 1, num: "500", state: "全部商品" },
      ],
      //用户总览
      yonghuArr: [
        { id: 1, num: "100", state: "今日新增" },
        { id: 1, num: "200", state: "昨日新增" },
        { id: 1, num: "1000", state: "本月新增" },
        { id: 1, num: "5000", state: "会员  总数" },
      ],

      //订单统计
      dingdanArr2: [
        { id: 1, name: "本月订单统计", num: "10000", state: "+10%同比上月" },
        { id: 2, name: "本周订单总数", num: "1000", state: "-10%同比上周" },
        { id: 3, name: "本月销售总额", num: "100000", state: "+10%同比上月" },
        { id: 4, name: "本周销售总额", num: "50000", state: "-10%同比上周" },
      ],
      // 使用 echarts部分：
      // option: {
      //   //x轴数据
      //   xAxis: {
      //     type: "category",
      //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      //   },
      //   //y轴
      //   yAxis: {
      //     type: "value",
      //   },
      //   series: [
      //     {
      //       data: [400, 200, 150, 80, 70, 110, 200], //柱状图中mon-sun的数据
      //       type: "bar",
      //       showBackground: true,
      //       backgroundStyle: {
      //         color: "rgba(180, 180, 180, 0.2)",
      //       },
      //     },
      //   ],
      // },
    option:{
      title: {
          text: '一周订单数据',
          subtext: '纯属虚构',
          left: 'center'
      },
      tooltip: {
          trigger: 'item'
      },
      legend: {
          orient: 'vertical',
          left: 'right',  //控制标注左右位置
      },
      series: [
          {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: [
                  {value: 400, name: 'monday'},
                  {value: 200, name: 'Tue'},
                  {value: 150, name: 'Wed'},
                  {value: 80, name: 'Thu'},
                  {value: 70, name: 'Fri'},
                  {value: 110, name: 'Sat'},
                  {value: 200, name: 'Sun'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
    }

    } //return
  },  //data function  
  
    mounted() {
      //调用 画图表的函数
      this.drawLine();
    },
    methods: {
      drawLine() {
        //1.初始化
        let mycharts = this.$echarts.init(document.getElementById("mychart"));
        //2.绘制
        mycharts.setOption(this.option);
      },
      },
};


</script>

<style scoped>
.home-con {
  margin: 20px;
}
.dd_item {
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  padding: 10px;
  border-radius: 5px;
}
.dd_text {
  padding-left: 10px;
}
img {
  width: 50px;
}
.home-con2 {
  background: chartreuse;
}

.daichuli_item {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  border-bottom: 1px solid rgb(192, 184, 184);
}
.daizi {
  color: red;
}
.shangping_item {
  display: ;
}
.con3 {
  border: 1px solid black;
  margin-right: 5px;
  margin-bottom: 10px;
}
.shangping_item {
  text-align: center;
  padding: 20px;
}

.home-con3 {
  background: chocolate;
}
.con4 {
  border: 1px solid black;
  margin-left: 5px;
  margin-bottom: 10px;
}
.home-con4 {
  background: blue;
}
.yonghu_item {
  text-align: center;
  padding: 20px;
}

.dingdan-con {
  background: crimson;
}

.box {
  display: flex;
}
.box .con3,
.con4 {
  flex: 1;
}

.box2 {
  border: 1px solid black;
}
.box5 {
  height: 595px;
  display: flex;
}
.dingdan_item {
  line-height: 50px;
  border-right: 1px solid black;
}

.box3 {
  height: 500px;
  flex: 0.1;
  display: flex;
}
.mychart {
  flex: 0.9;
}
</style>

